<template>
	<scroll-view class="scroll-refresher" :style="styles" scroll-y enable-back-to-top refresher-enabled
		:refresher-background="bgColor" :refresher-triggered="isTriggered" @refresherrefresh="onRefresherrefresh"
		@scrolltolower="onScrolltolower">
		<slot></slot>
	</scroll-view>
</template>

<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>

<script setup lang="ts">
	import { ref, defineEmits } from 'vue';
	// import { $uniBgColor } from '@/uni-scss';
	withDefaults(defineProps<{
		styles ?: CSSStyleDeclaration;
		bgColor ?: string;
	}>(), {
		bgColor: 'white'
	});
	const emit = defineEmits<{
		refresh : [];
		tolower : [];
	}>();
	const isTriggered = ref(false);
	const onRefresherrefresh = async () => {
		// 开始动画
		isTriggered.value = true
		setTimeout(() => {
			isTriggered.value = false
		}, 1000)
		emit('refresh');
	}

	function onScrolltolower() {
		emit('tolower');
	}
</script>

<style lang="scss">
	.scroll-refresher {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		// background-color: $uni-bg-color;
	}
</style>